<template>
    <view class="container">
        <header-bar :config="config" @rightClick="rightClick"></header-bar>
        <view class="main">
            <view class="pickup-list">
                <view class="pickup-list-item" @click="selectItem()">
                    <text class="pickup-name">好实用科技仓（田安店）</text>
                    <text class="pickup-address">泉州市丰泽区田安路与泉秀街交叉路口宝城大厦4号楼8楼</text>
                    <view class="action-bar">
                        <view class="action-item">
                            <text class="text-icon icon-pickup-lbs"></text>
                            <text>导航</text>
                        </view>
                        <view class="action-item">
                            <text class="text-icon icon-pickup-tel"></text>
                            <text>电话</text>
                        </view>
                    </view>
                </view>
                <view class="pickup-list-item" @click="selectItem()">
                    <text class="pickup-name">好实用科技仓（田安店）</text>
                    <text class="pickup-address">泉州市丰泽区田安路与泉秀街交叉路口宝城大厦4号楼8楼</text>
                    <view class="action-bar">
                        <view class="action-item">
                            <text class="text-icon icon-pickup-lbs"></text>
                            <text>导航</text>
                        </view>
                        <view class="action-item">
                            <text class="text-icon icon-pickup-tel"></text>
                            <text>电话</text>
                        </view>
                    </view>
                </view>
                <view class="pickup-list-item" @click="selectItem()">
                    <text class="pickup-name">好实用科技仓（田安店）</text>
                    <text class="pickup-address">泉州市丰泽区田安路与泉秀街交叉路口宝城大厦4号楼8楼</text>
                    <view class="action-bar">
                        <view class="action-item">
                            <text class="text-icon icon-pickup-lbs"></text>
                            <text>导航</text>
                        </view>
                        <view class="action-item">
                            <text class="text-icon icon-pickup-tel"></text>
                            <text>电话</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            config: {
                title: "取货点",
                centerSlot: true,
            },
        }
    },
    mounted() {},
    onShow() {},
    methods: {
        selectItem() {
            let data = {}
            const eventChannel = this.getOpenerEventChannel()
            eventChannel.emit("getSelectData", {
                ...data,
            })
            this.easyGoBack()
        },
    },
}
</script>

<style lang="scss">
.main {
    padding: 0 $app-page-padding;
}
.pickup-list-item {
    margin-top: $app-page-padding;
    padding: $app-page-padding $app-page-padding 0;
    background: $color-white;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    .pickup-name {
        font-size: $font-size-36;
        font-weight: bold;
        margin-bottom: 12rpx;
    }

    .pickup-address {
        font-size: $font-size-28;
        color: $app-color-text-desc;
    }

    .action-bar {
        display: flex;
        flex-direction: row;
        border-top: solid 1rpx $border;
        padding: $app-page-padding 0;
        margin-top: 22rpx;
        .action-item {
            border-right: solid 2rpx #b9c0d0;
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            &:last-child {
                border-right: 0;
            }
            .text-icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 12rpx;
            }
        }
    }
}

.icon-pickup-lbs {
    background-image: url(../../static/icon/icon-pickup-lbs.png);
}

.icon-pickup-tel {
    background-image: url(../../static/icon/icon-pickup-tel.png);
}
</style>
